<template>
	<view class="content">
		<!-- 表单 -->
		<u-form :model="form" ref="uForm" class="form-content" label-width="140" :error-type="errorType" :rules="rules">
			<u-form-item label="国家/国籍" prop="country" :required="true"><u-input v-model="form.country" placeholder="输入国家/国籍" disabled input-align="right" /></u-form-item>
			<u-form-item label="真实姓名" prop="trueName" :required="true"><u-input v-model="form.trueName" placeholder="请输入真实姓名" input-align="right" /></u-form-item>
			<u-form-item label="证件类型" prop="cardType" :required="true" right-icon="arrow-right" :right-icon-style="linkStyle" >
				<u-input v-model="form.cardType" placeholder="请选择证件类型" disabled input-align="right" @click="showCardType = !showCardType" />
			</u-form-item>
			<u-form-item label="证件号码" prop="card" :required="true"><u-input v-model="form.card" placeholder="请输入证件号码" input-align="right" /></u-form-item>
			<u-form-item label="民族" prop="nation" :required="true" right-icon="arrow-right" :right-icon-style="linkStyle">
				<u-input v-model="form.nation" placeholder="请选择民族" disabled input-align="right" @click="showNation = !showNation"/>
			</u-form-item>
			<u-form-item label="居住区域" prop="areaCode" :required="true" right-icon="arrow-right" :right-icon-style="linkStyle">
				<u-input v-model="form.areaCode" placeholder="请选择居住区域" disabled input-align="right" />
			</u-form-item>
			<!-- right-icon="map-fill" :right-icon-style="locStyle" 当前手动输入地址-->
			<u-form-item label="居住地址" prop="areaContent" :required="true"  >
				<u-input v-model="form.areaContent" placeholder="请输入居住地址"  input-align="right" />
			</u-form-item>
			<u-form-item label="政治面貌" prop="politicalStatusCode" :required="true" right-icon="arrow-right" :right-icon-style="linkStyle">
				<u-input v-model="form.politicalStatusCode" placeholder="请选择政治面貌" disabled input-align="right" @click="showPolitical = !showPolitical"/>
			</u-form-item>
			<u-form-item label="服务区域" prop="serverArea" :required="true" right-icon="arrow-right" :right-icon-style="linkStyle">
				<u-input v-model="form.serverArea" placeholder="请选择服务区域" disabled input-align="right" />
			</u-form-item>
			<u-form-item label="最高学历" prop="education" :required="true" right-icon="arrow-right" :right-icon-style="linkStyle">
				<u-input v-model="form.education" placeholder="请选择最高学历" disabled input-align="right" @click="showEducation = !showEducation"/>
			</u-form-item>
			<u-form-item label="服务类型" prop="serverCategory" :required="true" right-icon="arrow-right" :right-icon-style="linkStyle">
				<u-input v-model="form.serverCategory" placeholder="请选择服务类型" disabled input-align="right" />
			</u-form-item>
		</u-form>

		<!-- 底部按钮 -->
		<view class="bottom-group"><u-button class="" shape="circle" type="warning">保存编辑内容</u-button></view>
		
		<!-- 证件类型 -->
		<u-select v-model="showCardType" label-name="name" value-name="code" :default-value="[]" :list="cardOptions" @confirm="list => {selectConfirm(list, 3)}"></u-select>
		<!-- 民族 -->
		<u-select v-model="showNation" data-key="27" label-name="name" value-name="code" :default-value="[]" :list="nationOptions" @confirm="list => {selectConfirm(list, 27)}"></u-select>
		<!-- 政治面貌 -->
		<u-select v-model="showPolitical" data-key="28" label-name="name" value-name="code" :default-value="[]" :list="politicalOptions" @confirm="list => {selectConfirm(list, 28)}"></u-select>
		<!-- 最高学历 -->
		<u-select v-model="showEducation" data-key="25" label-name="name" value-name="code" :default-value="[]" :list="educationOptions" @confirm="list => {selectConfirm(list, 25)}"></u-select>
	</view>
</template>

<script>
export default {
	data() {
		return {
			errorType: ['border', 'message'],
			form: {
				country: '中国',
				trueName: '',
				cardType: '',
				card: '',
				nation: '',
				areaCode: '',
				areaContent: '',
				politicalStatusCode: '',
				serverArea: '',
				education: '',
				serverCategory: ''
			},
			rules: {},
			linkStyle: {
				color: '#AFAFAF'
			},
			locStyle: {
				color: '#4296FA',
				fontSize: '24px'
			},
			baseOptions: {
				'cardType' : 3,
				'nation' : 27,
				'politicalStatusCode' : 28,
				'education' : 25,
			},
			cardOptions: [],
			nationOptions: [],
			politicalOptions: [],
			educationOptions: [],
			showCardType: false,
			showNation: false,
			showPolitical: false,
			showEducation: false,
		};
	},
	methods: {
		selectConfirm(list, key) {
			console.log(list,key);
			// switch (key) {
			// 	case 3:
			// 	 this.from.cardType = ''
			// 	 break;
			// 	case 27:
			// 	 this.nationOptions = item.childList;
			// 	 break;
			// 	case 28:
			// 	 this.politicalOptions = item.childList;
			// 	 break;
			// 	case 25:
			// 	 this.educationOptions = item.childList;
			// 	 break;
			// }
		},
		async getListByCode() {
			const result = await this.$api.getListByCode({
				codes: Object.values(this.baseOptions).join(',')
			});
			
			(result?.data?.data ?? []).forEach(item => {
				
				switch (item.code - 0) {
					case 3:
					 this.cardOptions = item.childList;
					 break;
					case 27:
					 this.nationOptions = item.childList;
					 break;
					case 28:
					 this.politicalOptions = item.childList;
					 break;
					case 25:
					 this.educationOptions = item.childList;
					 break;
				}
			})
		},
		async getTagByCode() {
			const result = await this.$api.getTagByCode();
		},
		initSelect() {
			this.getListByCode();
			this.getTagByCode();
		}
	},
	onLoad() {
		this.initSelect();
	}
};
</script>

<style lang="scss">
.content {
	padding-bottom: 110rpx;
}

.form-content {
	padding: 0 40rpx;
	width: 100%;
	/deep/ .u-form-item {
		&--left__content {
			&__label {
				font-size: 28rpx;
			}
			&--required {
				left: -25rpx;
			}
		}
	}
}

.bottom-group {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 110rpx;
	padding: 20rpx 30rpx;
	background-color: #fff;
	box-shadow: -1rpx 0px 7rpx 0px rgba(146, 146, 146, 0.55);
	/deep/ .u-btn {
		&--warning {
			background-color: #ff8c71;
			border-color: #ff8c71;
			&--disabled {
				background-color: #ff9c91 !important;
				border-color: #ff9c91 !important;
			}
		}
	}
	/deep/ .u-warning-hover {
		background-color: #ff9c91 !important;
		border-color: #ff9c91 !important;
	}
}
</style>
